<template>
  <div>   
    <div class="item">
          <el-form ref="form" label-width="80px" label-position="top">
            <el-form-item label="上传资料（图片最多可上传9张，视频、音频、文档总共可上传3份，视频只支持MP4格式）">
              <div class="unselect uploadBtn">
                <el-button size="small" type="primary" style="width: 100%" :disabled="upLoadLoading">
                  {{upLoadLoading? '请稍后，文件正在上传中...' : '点击上传'}}
                </el-button>
                <input type="file" class="opacity0" @change="handleChangeUploadFile" multiple="multiple">
              </div>
              <div class="clearfloat hwui-ptb10">
                <div id="div_imglook" class="clearfloat">
                  <div class="lookimg" num="0" v-for="(item, index) in uploadResults" v-if="isPic(item.fileSuffix)">
                    <img :src="item.fileAbsoluteSavePath">
                    <div class="lookimg_delBtn"><i class="el-icon-view" @click="handlePictureCardPreview(item)"></i><i class="el-icon-delete" @click="removeFile(item)"></i></div>
                  </div>
                </div>
                <ul class="actDetTextList addFileList">
                  <li v-for="(item, index) in uploadResults" v-if="!isPic(item.fileSuffix)" class="actDetTextLi">
                    <a href="javascript:void(0)" class="hwui-fc-link"><i class="el-icon-paperclip hwui-mr4"></i>{{item.fileRealName}}</a>
                    <i class="el-icon-close delete rfloat gou" @click="removeFile(item)"></i>
                    <i class="el-icon-circle-check delright rfloat gou elgreen"></i>
                  </li>
                </ul>
              </div>

            </el-form-item>
          </el-form>
        </div>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
  </div>
</template>
<script>
import fileType from "./fileType.js";
export default {
  name: "upload",
  mixins: [fileType],
  data() {
    return {
      fileLength: 0,
      upLoadLoading: false,
      uploadResults: [],
        //   图片预览
      dialogVisible:false,
      dialogImageUrl:""
    };
  },
  props: {
    filesList: {
      type: Array,
      default: () => []
    },
    uploadUrl: {
      type: String,
      default: ""
    }
  },
  watch: {
    // filesList(n, o) {
    //   if (n != o) {
    //     this.uploadResults = this.filesList;
    //   }
    // }
  },
  methods: {
    handleChangeUploadFile(e) {
      let files = e.target.files;
      if (files.length === 0) {
        return;
      }
      let formData = new FormData();
      let ImgLength = 0,
        textLength = 0;

      /* let canDo = true
        for (let file of files) {
          console.log(file)
          if(file.type.split('/')[0] == "video" && file.type.split('/')[1] != "mp4"){
            let canDo = false
            this.$message.warn('请上传MP4格式的视频')
            return
          }
        }
        if(!canDo){
          return
        }
*/
      for (let file of files) {
        if (file.type.split("/")[0] == "image") {
          ImgLength += 1;
        } else {
          textLength += 1;
        }
      }
      if (document.getElementsByClassName("lookimg").length + ImgLength > 9) {
        this.$message.warn("最多只能上传9张图片");
        return;
      }
      if (
        document.getElementsByClassName("actDetTextLi").length + textLength >
        3
      ) {
        this.$message.warn("最多只能上传3份文档视频或者音频");
        return;
      }
      var size = 0;
      for (var i = 0; i < files.length; i++) {
        if (files[i].size) {
          size += files[i].size / 1024 / 1024;
        }
      }
      if (size >= 50) {
        this.$message.warn("单次上传文件大小不得大于50M！");
        return false;
      }

      for (let file of files) {
        formData.append("files", file);
      }
      this.upLoadLoading = true;
      // this.$ajax.post(SocietyUrls.post.webPracticeActivityStudyUpload, formData)
      //   .success('上传材料成功', data => {
      //     data.rows.forEach(r => this.uploadResults.push(r));
      //     e.target.value = '';
      //     this.$emit("changeFileList", this.uploadResults);
      //   })
      //   .finally(()=>{
      //     this.upLoadLoading = false;
      //   });

      //   模拟数据，交互后删除
      console.log(this.uploadUrl);
      console.log(this.filesList);
      this.uploadResults = [
        {
          fileAbsoluteSavePath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10.xlsx",
          fileSaveFullName:
            "批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10.xlsx",
          fileSaveFullPath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10.xlsx",
          fileRealName: "批量导入学生分组-市级活动001.xlsx",
          fileSuffix: "xlsx",
          fileRelativeSavePath: "",
          fileSaveName:
            "批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10"
        },
        {
          fileAbsoluteSavePath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10.xlsx",
          fileSaveFullName:
            "批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10.xlsx",
          fileSaveFullPath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10.xlsx",
          fileRealName: "批量导入学生分组-市级活动001.xlsx",
          fileSuffix: "xlsx",
          fileRelativeSavePath: "",
          fileSaveName:
            "批量导入学生分组-市级活动001.xlsx_to_2019-11-26_17-02-10"
        },
        {
          fileAbsoluteSavePath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\VID_20190608_193659.mp4_to_2019-11-26_17-03-15.mp4",
          fileSaveFullName:
            "VID_20190608_193659.mp4_to_2019-11-26_17-03-15.mp4",
          fileSaveFullPath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\VID_20190608_193659.mp4_to_2019-11-26_17-03-15.mp4",
          fileRealName: "VID_20190608_193659.mp4",
          fileSuffix: "mp4",
          fileRelativeSavePath: "",
          fileSaveName: "VID_20190608_193659.mp4_to_2019-11-26_17-03-15"
        },
        {
          fileAbsoluteSavePath:
            "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2869264505,1022634149&fm=26&gp=0.jpg",
          fileSaveFullName:
            "u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-52.jpg",
          fileSaveFullPath:
            "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2869264505,1022634149&fm=26&gp=0.jpg",
          fileRealName: "u=3207781657,3460758070&fm=27&gp=0.jpg",
          fileSuffix: "jpg",
          fileRelativeSavePath: "",
          fileSaveName:
            "u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-51"
        },
        {
          fileAbsoluteSavePath:
            "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2911275242,3697213587&fm=26&gp=0.jpg",
          fileSaveFullName:
            "u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-52.jpg",
          fileSaveFullPath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-52.jpg",
          fileRealName: "u=3207781657,3460758070&fm=27&gp=0.jpg",
          fileSuffix: "jpg",
          fileRelativeSavePath: "",
          fileSaveName:
            "u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-50"
        },
        {
          fileAbsoluteSavePath:
            "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2220381114,787577306&fm=26&gp=0.jpg",
          fileSaveFullName:
            "u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-51.jpg",
          fileSaveFullPath:
            "http://192.168.0.124:8887//resource/zksz\\files\\practice\\upload\\webPracticeActivity\\u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-52.jpg",
          fileRealName: "u=3207781657,3460758070&fm=27&gp=0.jpg",
          fileSuffix: "jpg",
          fileRelativeSavePath: "",
          fileSaveName:
            "u=3207781657,3460758070&fm=27&gp=0.jpg_to_2019-11-26_17-03-52"
        }
      ];
      this.upLoadLoading = false;
      this.$emit("changeFileList", this.uploadResults);
      //   模拟数据，交互后删除
    },
    removeFile(item) {
      for (let i = 0; i < this.uploadResults.length; i++) {
        if (item.fileSaveName === this.uploadResults[i].fileSaveName) {
          this.uploadResults.splice(i, 1);
          break;
        }
      }
      this.$emit("changeFileList", this.uploadResults);
    },
    handlePictureCardPreview(item) {
      this.dialogImageUrl = item.fileAbsoluteSavePath;
      this.dialogVisible = true;
    }
  },
  mounted() {
    console.log(this.filesList);
    this.uploadResults = this.filesList;
  }
};
</script>

<style>
.el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 10px;
}

.el-form-item__content {
  margin-left: 0;
}

.areaPH::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #ccc;
}
.areaPH:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
}
.areaPH::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
}
.areaPH:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ccc;
}
</style>
